<template>
  <div>
    <a-radio
      v-model:checked="checked"
      disabled
    >Radio</a-radio>
    <br>
    <br>

    <a-radio-group
      size="large"
      button-style="solid"
      v-model:value="value1"
    >
      <a-radio-button value="a">Hangzhou</a-radio-button>
      <a-radio-button
        disabled
        value="b"
      >Shanghai</a-radio-button>
      <a-radio-button value="c">Beijing</a-radio-button>
      <a-radio-button value="d">Chengdu</a-radio-button>
    </a-radio-group>
    <br>
    <br>

    <a-radio-group
      v-model:value="value1"
      :options="plainOptions"
    />
    <br>

    <br>
    <a-radio-group
      v-model:value="value"
      name="radioGroup"
    >
      <a-radio
        :style="radioStyle"
        :value="1"
      >Option A</a-radio>
      <a-radio
        :style="radioStyle"
        :value="2"
      >Option B</a-radio>
      <a-radio
        :style="radioStyle"
        :value="3"
      >Option C</a-radio>
      <a-radio
        :style="radioStyle"
        :value="4"
      >
        More...
        <a-input
          v-if="value === 4"
          style="width: 100px; margin-left: 10px"
        />
      </a-radio>
    </a-radio-group>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      checked: false,
      value: '',
      value1: "",
      plainOptions: [
        'Apple', 'Pear', 'Orange'
      ],
      radioStyle: {
        display: 'flex',
        height: '30px',
        lineHeight: '30px',
      }
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
